<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <!-- 表单 -->
    <el-form ref="userForm" :rules="userRules" :model="userForm" label-width="80px">
                <!-- 不需要校验 不用添加prop -->
     <el-form-item label="登录名称" >
        <el-input  disabled v-model="userForm.username"></el-input>
     </el-form-item>
     <el-form-item label="用户昵称" prop='nickname'>
        <el-input v-model="userForm.nickname"></el-input>
    </el-form-item>
     <el-form-item label="用户邮箱" prop='email'>
        <el-input v-model="userForm.email"></el-input>
    </el-form-item>
    <el-form-item >
        <el-button type="primary" @click="submitForm">提交修改</el-button>
        <el-button type="" @click="$refs.userForm.resetFields()">重置</el-button>
    </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'UserInfo',
  data() {
    return {
      // 修改昵称和邮箱是在已有的基础上进行修改 , 所以此时的userForm的初始元素不应该都是空的
      // 需要将已有的信息添加到userForm
      // 由于 data 先于 computed 初始化完成
      // 所以不能直接在 data 用使用 computed 的内容
      userForm: {},
      userRules: {
        nickname: [
          { required: true, message: '请输入用户昵称', trriger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '昵称必须是 1 ~ 10 位的非空字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trriger: 'blur' },
          { type: 'email', message: '请输入正确格式的邮箱', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 拷贝
    // 两个this都指向$store.state的数据, 并且与input进行绑定, 只要一修改 , 两边都跟着修改
    // 但是此bug碰巧被用来实现存储的插件解决
    // this.userForm = this.userinfo
    // 在没有插件的情况下 解决这个问题
    // 1. 深拷贝
    // 2.
    // = {} 创建新的对象
    // ...展开运算符 克隆了...this.userinfo的值
    // 此方法只能拷贝一层， 适用于拷贝的对象中没有对象
    this.userForm = { ...this.userinfo }
    // 3. ES6 也出了对象拷贝方法
    // Object.assign(target目标, source源)
    Object.assign({}, this.userinfo)
    // console.log(this.userinfo)
    // console.log(this.userForm)
  },
  computed: {
    ...mapState('user', ['userinfo'])
  },
  methods: {
    submitForm() {
      // 兜底校验
      this.$refs.userForm.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        // 校验通过, 发送请求
        const { data: res } = await this.$http.put('/my/userinfo', this.userForm)
        console.log(res)
        // 重新发送请求 ， 获取最新的数据
        this.$store.dispatch('user/getUserInfo')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
}
</style>
